$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$f: 19.2;

.home {
  position: relative;
  width: 100%;
  .container {
    position: relative;
    .banner {
      width: 100%;
      position: relative;

      &::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background: linear-gradient(110deg, #C9DBEC 0.46%, #C8D7EA 11.4%, rgba(225, 236, 249, 0.96) 34.4%, rgba(234, 245, 255, 0.86) 46.39%, rgba(234, 245, 255, 0.31) 61.38%, rgba(234, 245, 255, 0.00) 88.26%);
      }

      .bg {
        img {
          width: 100%;
          display: block;
          object-fit: cover;
        }
      }

      .text {
        position: absolute;
        left: 10vw;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;

        .p1 {
          color: #030303;
          font-size: $fontSize_54;
          font-weight: bold;
          display: flex;
          align-items: flex-start;

          svg {
            width: 21/$f+vw;
            display: block;
            margin: 0.7vw 0 0 0.7vw;
          }
        }

        .p2 {
          color: #464646;
          font-size: $fontSize_36;
          margin-top: 0.6vw;
            font-family: 'SourceHanSansCN-Light';
        }
      }
    }
    .main{
      margin: 6vw 10vw;
      .section1{
        border-bottom: 1px solid #CFCFCF;
        padding-bottom: 10px;
        position: relative;
        .links{
          display: flex;
          align-items: center;
          a,span,p{
            color: #666;
            font-size: $fontSize_18;
          }
          a{
            transition: all 600ms;
            &:hover{
              color:rgba(0, 96, 176, 1);
            }
          }
          span{
            margin: 0 5px;
          }
        }
        .back{
          position: absolute;
          right: 0;
          bottom:0;
          a {
            background: #0060B0;
            color: white;
            font-size: $fontSize_22;
            padding: 0.4vw 2.2vw;
            transition: all 600ms;
            display: block;
          }
        }
      }
      .section2{
        margin: 3vw 0;
        .t{
          color: #000;
          font-size: $fontSize_40;
          font-weight: 600;
        }
        .time{
          color: #000;
          font-size: $fontSize_22;
          opacity: .5;
          margin: 1.5vw 0 3vw 0;
        }
        .html{
          color: #464646;
          font-size: $fontSize_16;
          line-height: 1.8;
          margin-bottom: 3vw;
          img{
            max-width: 100%;
            object-fit: contain;
          }
        }
        .share{
          display: flex;
          justify-content: space-between;
          margin: 4vw 0 0 0 ;
          align-items: center;
          .l{
            display: flex;
            a{
              display: block;
              margin-right: 1vw;
              transition: all 600ms;
              svg{
                width: 50/$f+vw;
                display: block;
              }
              &:hover{
                transform: scale(1.1);
              }
            }
          }
          .top{
            img{
              cursor: pointer;
              width: 48/$f+vw;
            }
          }
        }
        .pager{
          display: flex;
          justify-content: space-between;
          border-top: 1px solid #CFCFCF;
          padding: 1.5vw 0;
          margin: 1.5vw 0;
          a{
            color: #000;
            font-size: $fontSize_28;
            transition: all 600ms;
            &:hover{
              color: #0060B0;
            }
          }
        }
        .recommend{
          .t1{
            color: #000;
            font-size: $fontSize_36;
            font-weight: 600;
            position: relative;
            width: fit-content;
            padding-bottom: 1vw;
            &::before{
              content:'';
              display: block;
              position: absolute;
              left: 0;
              width:50%;
              height: 5/$f+vw;
              bottom:0;
              background-color: rgba(0, 166, 229, 1);
              transition: all 600ms;
            }
            &::after{
              content:'';
              display: block;
              position: absolute;
              left:50%;
              width: 25%;
              height: 5/$f+vw;
              bottom:0;
              background-color: rgba(0, 96, 176, 1);
              transition: all 600ms;
            }
          }
          .allNews{
            margin-top: 2vw;
            a{
              display: flex;
              justify-content: space-between;
              margin-bottom: 1.5vw;
              .pt{
                color: #000;
                font-size: $fontSize_28;
                transition: all 600ms;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .time2{
                color: #000;
                font-size: $fontSize_22;
                opacity: .5;
                  font-family: 'SourceHanSansCN-Light';
              }
              &:hover{
                .pt{
                  color: #0060B0;
                }
              }
            }
          }
        }
      }
    }
  }



  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .container{
      .banner{
        .bg{
          img{
            height: 150px;
          }
        }
        .text{
          left: 5%;
          .p1{
            font-size:24px;
            svg{
              width: 10px;
            }
          }
          .p2{
            font-size: 18px;
          }
        }
      }
      .main{
        margin: 20px 5%;
        .section1{
          .links{
            a,span,p{
              font-size: 14px;
            }
          }
          .back{
            a{
              font-size: 14px;
              padding: 4px 15px;
            }
          }
        }
        .section2{
          margin: 20px 0;
          .t{
            font-size: 18px;
          }
          .time{
            font-size: 14px;
            margin: 10px 0 20px 0;
          }
          .html{
            font-size: 14px;
          }
          .share{
            .l{
              a{
                margin-right: 10px;
                svg{
                  width: 30px;
                }
              }
            }
            .top{
              img{
                width: 30px;
              }
            }
          }
          .pager{
            padding: 15px 0;
            margin: 15px 0;
            .prev,.next{
              font-size: 14px;
              max-width: 48%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .recommend{
            .t1{
              font-size: 18px;
              padding-bottom: 10px;
              &::before,&::after{
                height: 3px;
              }
            }
            .allNews{
              margin-top: 20px;
              a{
                margin-bottom: 15px;
                .pt{
                  font-size: 14px;
                  width: 70%;
                }
                .time2{
                  font-size: 14px;
                }
              }
            }
          }
        }
      }
    }
  }
}